<template>
  <div class="banner">
    <el-carousel
      height="33.125rem"
      style="width:100%"
      :indicator-position="'none'"
    >
      <el-carousel-item
        v-for="(item, index) in banner"
        :key="index"
        style="width:100%"
      >
        <img
          :src="item"
          alt=""
          class="banner-img"
          style="width:100%"
        >
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
	export default {
		name: "Banner",
		props: {
			dataId: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				banner: [],
			};
		},
		mounted() {
			// this.getData(this.dataId)
		},
		methods: {
			getData(id) {
				let param = {
					class_id: id,
				};
				this.$api.home.categoryBanner(param).then((res) => {
					// 执行某些操作
					if (res.code == 1) {
						console.log('res', res.data)
						if (res.data === null) {
							console.log('res.data')
							this.banner = []
						}
						if (res.data.pc_second_images) {
							this.banner = res.data.pc_second_images.split(',')
						}


					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.banner {
		//height: 530px;
		overflow: hidden;
		position: relative;
		display: flex;
		width: 100%;
		margin-top: 6.18rem;

		.banner-img {
			width: 100%;
			//object-fit: contain;
			cursor: pointer;
			height: 100%;
		}
	}
</style>
